<template>
  <div class="evaluate-upload">
    <div class="image" v-for="img in uploadImg" :key="img.index">
      <img :src="img" alt="" />
      <span class="iconfont icon-guanbi"></span>
    </div>
    <div class="last">
      <div class="btn">
        <span class="iconfont icon-guanbi"></span>
        <input type="file" accept="image/*" @change="getPicture($event)"/>
      </div>
      <div class="tip">
        已上传<i>{{ uploadImg.length }}</i>张，还能上传<i>{{ count - uploadImg.length }}</i>张
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: 'EvaluateUpload',
  props: {
    uploadImg: {
      type: Array,
      default: () => ([])
    }
  },
  setup (props, { emit }) {
    const count = ref(9)
    const getPicture = (e) => {
      // 预览图片
      // const src = window.URL.createObjectURL(e.target.file[0])
      // props.uploadImg.push(src)
      // emit('update:uploadImg', uploadImg.push(src))
      // 将图片文件转化为base64格式图片
      // var reader = new FileReader()
      // reader.onload = (e) => {
      // 使用axios的post方法上传到服务器
      // }
      // reader.readAsDataURL(e.target.file[0])
    }
    return { count, getPicture }
  }
}
</script>

<style lang="less" scoped>
.evaluate-upload {
  display: flex;
  flex-wrap: wrap;
  .image {
    width: 80px;
    height: 80px;
    margin-right: 12px;
    margin-bottom: 12px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .iconfont {
      width: 20px;
      height: 20px;
      text-align: center;
      line-height: 20px;
      background-color: #d8d8d8;
      color: #fff;
      position: absolute;
      top: 0;
      right: 0;
      font-size: 12px;
      display: none;
    }
    &:hover {
      .iconfont {
        display: block;
      }
    }
  }
  .last {
    display: flex;
    .btn {
      width: 80px;
      height: 80px;
      background-color: #d8d8d8;
      text-align: center;
      line-height: 80px;
      margin-right: 12px;
      position: relative;
      .iconfont {
        color: #fff;
        transform: rotate(45deg);
        display: inline-block;
        font-size: 36px;
      }
      input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        &:hover {
        cursor: pointer;
      }
      }
    }
    .tip {
      color: #999;
      height: 80px;
      display: flex;
      align-items: flex-end;
      line-height: 28px;
      i {
        color: @priceColor;
      }
    }
  }
}
</style>
